<template>
  <view class="content" :style="{ height: sizeInfo.height + 'px' }">
    <view class="info">
      <div style="display: flex">
        <image
          class="header"
          src="/static/image/goodsLogo.jpg"
          mode="widthFix"
        ></image>
        <view class="account-info">
          <text class="account">{{ account }}</text>
          <text class="level">普通用户</text>
        </view>
      </div>
      <image
        class="setting-img"
        src="/static/image/setting.png"
        @click="settingClick()"
      ></image>
    </view>
    <view class="account-context">
      <view v-for="(x, index) in accountData" :key="index" class="account">
        <text>{{ x.number }}</text>
        <text>{{ x.name }}</text>
      </view>
    </view>
    <view class="service-content">
      <text style="margin-left: 20rpx; font-size: 32rpx">我的服务</text>
      <view class="order-content" @click="navClick('pages/order/index')">
        <image class="order-img" src="/static/image/order.png"></image>
        <text class="order-text">我的订单</text>
      </view>
    </view>
  </view>
</template>

<script>
import api from "@/common/utils/api"; //接口
export default {
  data() {
    return {
      student: uni.getStorageSync("student"),
      sizeInfo: {
        height: 0, //滚动区域高度
      },
      msg: "/static/image/msg.png",
      account: "rJ6100Qu5v",
      accountData: [
        {
          name: "权益卡",
          number: "0",
        },
        {
          name: "电子账户",
          number: "0.00",
        },
        {
          name: "能量值",
          number: "0.00",
        },
      ],
    };
  },
  created() {},
  onLoad() {},
  onShow() {
    let phone = uni.getStorageSync("phone");
    let userInfo = uni.getStorageSync("userInfo");
    if (userInfo) {
      this.account = userInfo.phone;
    }
  },
  mounted() {},
  methods: {
    navClick(url) {
      // this.$u.route({
      //   url: url,
      // });
    },
    settingClick() {
      const _this = this;
      uni.showModal({
        title: "提示",
        content: "确定退出?",
        success: function (res) {
          if (res.confirm) {
            uni.removeStorageSync("userInfo");
            _this.$u.route({
              url: "pages/login/index",
            });
          } else if (res.cancel) {
            // console.log('用户点击取消')
          }
        },
      });
    },
  },
};
</script>

<style scoped>
.content {
  display: flex;
  flex-direction: column;
  background: #f7f7f7;
}
.info {
  display: flex;
  flex-direction: row;
  padding: 100rpx 20rpx 40rpx;
  justify-content: space-between;
}
.header {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
}
.account-info {
  margin-left: 10rpx;
  display: flex;
  flex-direction: column;
}
.account {
  font-weight: bold;
  font-size: 30rpx;
}
.level {
  margin-top: 10rpx;
  background: #f7f7f7;
  width: 130rpx;
  text-align: center;
  height: 40rpx;
  line-height: 40rpx;
  border-radius: 6rpx;
}

.account-context {
  display: flex;
  flex-direction: row;
}
.account {
  width: 33%;
  display: flex;
  flex-direction: column;
  text-align: center;
}
.setting-img {
  margin: 10rpx 10rpx 0 0;
  width: 40rpx;
  height: 40rpx;
}
.service-content {
  margin: 60rpx 20rpx;
}
.order-content {
  margin-top: 40rpx;
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* justify-content: center; */
}
.order-img {
  width: 70rpx;
  height: 70rpx;
}
.order-text {
  margin-top: 10rpx;
  text-align: center;
}
</style>